<template>
	<div class="model-main">
		<div class="title">
			<a href="javascript:;" @click="window.history.go(-1);" class="back"></a> 
			修改五官			
			<a href="javascript:;" @click="" class="save">保存</a> 
		</div>
		<div class="model-con">
			<img class="model-img" src="../assets/image/pic-_barter@2x.png">
			<div class="model-set">
				<div class="set-title">
					<a href="javascript:;" class="hair-style on">
						<i></i>
						发型
					</a><a href="javascript:;" class="wg">
						<i></i>
						五官
					</a><a href="javascript:;" class="hair-color">
						<i></i>
						发色
					</a>
				</div>
				<div class="con">
					<a href="javascript:;" @click=""><img src="../assets/image/fit/pi.png"></a>
					<a href="javascript:;" @click=""><img src="../assets/image/fit/pi.png"></a>
					<a href="javascript:;" @click=""><img src="../assets/image/fit/pi.png"></a>
					<a href="javascript:;" @click=""><img src="../assets/image/fit/pi.png"></a>
					<a href="javascript:;" @click=""><img src="../assets/image/fit/pi.png"></a>
					<a href="javascript:;" @click=""><img src="../assets/image/fit/pi.png"></a>
					<a href="javascript:;" @click=""><img src="../assets/image/fit/pi.png"></a>
					<a href="javascript:;" @click=""><img src="../assets/image/fit/pi.png"></a>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import Vue from 'vue'
	export default {
	    data () {
	        return {
	        }
	    },
	    name: 'app',
	    methods:{

	    }
	}
</script>
<style lang="scss">
	.model-main {	

		.title {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 0.88rem;
			background: #fff;
			font-size: 0.36rem;
			color: #333;
			line-height: .88rem;
			text-align: center;
		}
		
		.back {
			position: absolute;
			top:0;
			bottom: 0;
			margin: auto;
			left: 0.3rem;
			display: block;
			width: 0.24rem;
			height: 0.42rem;
			background: url(../assets/image/fit/back.jpg) no-repeat center center /cover;
		}
		
		.save {
			position: absolute;
			top: 0;
			right: 0.3rem;
			color: #ff365d;  
			line-height: 0.88rem;
			font-size: 0.32rem;
		}

		.model-img {
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}

		.model-con {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: calc(100% - .88rem);
		}

		.model-set{
			height: 2.47rem;
			position: fixed;
			left: 0;
			bottom: 0;
			background: #fff;
			width: 100%;
		}

		.set-title {
			position: absolute;
			top: -0.47rem;
			left: 0;
			right: 0;
			margin: auto;
			height: 1.1rem;
			width: 5.2rem;
			background: #fff;
			border-top-left-radius: .2rem;
			border-top-right-radius: .2rem;
		}

		.hair-style {
			display: inline-block;				
			width: 2.6rem;
			height: 1.1rem;
			color: #999;
			font-size: 0.26rem;
			line-height: 1.1rem;
			text-indent: 1.09rem;

			i {
				display: inline-block;		
				position: absolute;
				left: .5rem;
				top: .28rem;
				width: 0.41rem;
				height: 0.59rem;
				background: url(../assets/image/fit/hair-style_before@2x.png) no-repeat center center /cover;
			}

			&.on {
				color: #ff365d;

				i {
					background: url(../assets/image/fit/hair-style@2x.png) no-repeat center center /cover;
				}
			}
		}

		.wg {
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			top: -0.3rem;
			width: 1.24rem;
			height: 1.24rem;
			background: #fff;
			border-radius: 50%;
			font-size: .26rem;
			color: #ff365d;
			text-align: center;

			i {
				display: block;
				margin: 0.11rem auto 0.02rem; 
				width: 0.62rem;
				height: 0.62rem;
				background: url(../assets/image/fit/features@2x.png) no-repeat center center /cover;
			}

			&.on {
				color: #ff365d;

				i {
					background: url(../assets/image/fit/features@2x.png) no-repeat center center /cover;
				}
			}
		}

		.hair-color {
			display: inline-block;	
			padding-right: .42rem;			
			width: 2.18rem;
			height: 1.1rem;
			color: #999;
			font-size: 0.26rem;
			line-height: 1.1rem;
			text-align: right;

			i {
				display: inline-block;		
				position: absolute;
				right: .96rem;
				top: .26rem;
				width: .62rem;
				height: .62rem;
				background: url(../assets/image/fit/color-development_before@2x.png) no-repeat center center /cover;
			}

			&.on {
				color: #ff365d;

				i {
					background: url(../assets/image/fit/color-development@2x.png) no-repeat center center /cover;
				}
			}
		}

		.con {
			height: 1.5rem;
			margin: 0.77rem 0 0.21rem;
			overflow-x: scroll;

			a {
				margin-left: 0.41rem;
				float: left;
				height: 1.5rem;
				width: 1.3rem;
			}

			img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}
</style>